<script setup lang="ts">
import { watch, ref } from 'vue'
import * as ElIcons from '@element-plus/icons'
import { toLine } from '@/utils/index'
import { useCopy } from '@/hooks/useCopy'

const props = defineProps<{
  title: string // 弹出框标题
  visible: boolean // 控制弹出框的显示和隐藏
}>()

const emits = defineEmits(['update:visible'])
// 拷贝一份父组件传递过来的visible
let dialogVisible = ref<boolean>(props.visible)

// 点击按钮显示弹出框
const onClickButton = () => {
  emits('update:visible', !props.visible)
}

watch(
  () => props.visible,
  (val) => {
    dialogVisible.value = val
  }
)
// 监听组件内部的 dialogVisible 变化
watch(
  () => dialogVisible.value,
  (val) => {
    emits('update:visible', val)
  }
)

//
const onClickIcon = (item: string) => {
  // 复制文本
  useCopy(`<el-icon${toLine(item)} />`)
  // 关闭弹窗
  dialogVisible.value = false
}
</script>

<template>
  <el-button @click="onClickButton" type="primary">
    <slot></slot>
  </el-button>

  <div class="dialog-wrapper">
    <el-dialog :title="title" v-model="dialogVisible">
      <ul class="container">
        <li class="item" v-for="(item, index) in Object.keys(ElIcons)" :key="index" @click="onClickIcon(item)">
          <component :is="`el-icon${toLine(item)}`" />
          <span class="text">{{ item }}</span>
        </li>
      </ul>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.dialog-wrapper {
  .container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    .item {
      width: 25%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-bottom: 20px;
      height: 70px;
      cursor: pointer;
      .text {
        margin-top: 10px;
      }
    }
  }
  svg {
    width: 2em;
    height: 2em;
  }
  :deep(.el-dialog__body) {
    height: 500px;
    overflow-y: scroll;
  }
}
</style>
